<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h1 {
            height: 70px;
            color: red;
            font-size: 50px;
            line-height: 70px;
        }

        .box {
            width: 100%;
            height: 700px;
            position: relative;

        }

        .box .box2 {
            width: 400px;
            position: absolute;
            height: 200px;
            z-index: 9;
            left: 0;
            top: 0;
        }

        .box div {
            width: 400px;
            height: 230px;
            display: inline-block;
            margin-right: 30px;
            /* position: relative; */
            margin-top: 10px;
            color: #000;
        }



        .box div img {
            width: 300px;
            height: 150px;
        }
    </style>
</head>

<body>
    <!-- <a href=""></a> -->
    <!-- <button class="btn">dianji</button> -->
    <h1>相亲网</h1>
    <div class="box"></div>

    <script src="../js/7.js"></script>
    <script>
        // console.log(location.href)
        // let btn = document.querySelector(".btn");
        // btn.onclick = () => {
        //     // open("file:///C:/Users/Administrator/Desktop/QF/QF2/day19/html/7-1.html")
        //     open("7-1.html?id" + "name:dsf")
        // }

        let a = (doo, nei) => {
            let p = document.createElement(doo);
            let p1 = document.createTextNode(nei);
            p.appendChild(p1)
            return p
        }


        let box = document.querySelector(".box")

        shuju.forEach((item, index) => {
            let div = document.createElement("div");
            let img = document.createElement("img");
            // img.style.src = item.img;

            let img1
            img.setAttribute("src", item.img)
            let div1 = document.createElement("div");
            div1.appendChild(img)
            div.appendChild(div1)
            div.appendChild(a("p", "姓名:" + item.name))
            div.appendChild(a("p", "年龄:" + item.age))
            div.appendChild(a("p", "性别:" + item.sex))
            div.appendChild(a("p", "爱好:" + item.habbit))
            let dogg = "未婚"
            if (!item.dog) {
                dogg = "已婚"
            }
            div.appendChild(a("p", "婚姻状态:" + dogg))

            img.onmouseover = (e) => {
                img1 = document.createElement("img");
                img1.setAttribute("src", item.img)
                img1.setAttribute("class", "box2")
                let x = e.clientX;
                let y = e.clientY;
                img1.style.left = x + "px"
                img1.style.top = y + "px"
                div1.appendChild(img1)
                div1.onmousemove = (e) => {
                    x = e.clientX;
                    y = e.clientY;
                    img1.style.left = x + "px"
                    img1.style.top = y + "px"
                }
                img.onmouseout = () => {
                    img1.remove()
                }
            }
            img.onclick = () => {
                open("7-1.html?id=" + item.id)
            }


            if (index == 3) {
                // box.appendChild
                box.innerHTML += "<br>"
            }
            // console.log(item.img)



            box.appendChild(div)
        })




    </script>

</body>

</html>